<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="../../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <h2 class="text-center m-4">欢迎注册启点教育</h2>
    <form action="#" method="get">
        <div class="form-group m-4">
            <label for="user_name" class="col-form-label col-3 text-right">用户名</label>
            <input type="text" name="username" placeholder="请输入用户名" id="user_name" class="form-control-sm col-6">
        </div>

        <div class="form-group m-4">
            <label for="password" class="col-form-label col-3 text-right">密码</label>
            <input type="password" name="password" id="password" placeholder="请输入密码" class="form-control-sm col-6">
        </div>

        <div class="form-group m-4 row ">
            <div class="col-3 text-right">性别</div>
            <div class="col-6 row">
                <div class="form-check col-2 ">

                    <input type="radio" name="gender" value="男" id="gender_m" class="form-check-input">
                    <label for="gender_m" class="form-check-label text-right">男</label>
                </div>

                <div class="form-check col-2 offset-2">
                    <input type="radio" name="gender" value="女" id="gender_w" class="form-check-input">
                    <label for="gender_w" class="form-check-label text-right">女</label>
                </div>
            </div>
        </div>
        <div class="from-group m-4 row">
            <div class="col-3 text-right">爱好</div>
            <div class="col-6 row">
                <div class="col-4 row">
                <div class="form-check col-12">
                    <input type="checkbox" name="love" value="篮球" id="bb" class="form-check-input">
                    <label for="bb" class="form-check-label">篮球</label>
                </div>
            </div>
                <div class="col-4 row">
                <div class="form-check col-12 offset-2">
                    <input type="checkbox" name="love" value="足球" id="fb" class="form-check-input">
                    <label for="fb" class="form-check-label">足球</label>
                </div>
            </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>